<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>

    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <title>个人成绩分析</title>
    <meta name="context-path" th:content="@{/}"/>
    <link rel="stylesheet" th:href="@{/resources/matrix/css/bootstrap.min.css}"/>
    <link rel="stylesheet" th:href="@{/resources/achieve/css/index.css}"/>
    <link rel="stylesheet" th:href="@{/resources/achieve/css/font-awesome.min.css}"/>
    <link rel="stylesheet" th:href="@{/resources/achieve/css/swiper.min.css}"/>


    <script>
(function(doc,win){var docEl=doc.documentElement,
    resizeEvt='orientationchange'in window?'orientationchange':'resize',
    recalc=function(){
    var clientWidth=docEl.clientWidth;if(!clientWidth)return;if(clientWidth>=750){docEl.style.fontSize='100px'}
    else{docEl.style.fontSize=100*(clientWidth/750)+'px'}document.body.style.display="block"};
if(!doc.addEventListener)return;win.addEventListener(resizeEvt,recalc,false);doc.addEventListener('DOMContentLoaded',recalc,false)})(document,window);


    </script>
    <script th:src="@{/resources/js/jquery.min.js}" type="text/javascript"></script>
    <script th:src="@{/resources/achieve/js/swiper.min.js}" type="text/javascript"></script>
    <script th:src="@{/resources/echart/echarts.js}" type="text/javascript"></script>
    <script th:src="@{/resources/achieve/js/jquery.SuperSlide.2.1.3.js}" charset="utf-8"></script>

    <script th:inline="javascript">

    var contextRoot = $("meta[name='context-path']").attr("content");
    var chartData = [];
    var charStr = [];
    var achieveData = [];
    var achieveStr = [];
    var clazzScoreData = [];
    var clazzScoreStr = [];
    var studentScoreStr = [];
    var achieveAllData = [];
    var studentScoreEntityList = [[${studentScoreEntityList}]];
    var achieveEntityList = [[${achieveEntityList}]];
    var clazzScoreModelList = [[${clazzScoreModelList}]];
    var countScore = [[${countScore}]];
    for(var i=0;i<studentScoreEntityList.length;i++){
        var subName = studentScoreEntityList[i].subject.name+studentScoreEntityList[i].score+"分";
        charStr.push(subName);
        chartData.push({value: studentScoreEntityList[i].score, name: subName});
        studentScoreStr.push(studentScoreEntityList[i].score);
    }
    for(var i=0;i<achieveEntityList.length;i++){
        achieveStr.push(achieveEntityList[i].term);
        achieveData.push({value: achieveEntityList[i].totalScore});
    }
    for(var i=0;i<clazzScoreModelList.length;i++){
        clazzScoreData.push({name: clazzScoreModelList[i].codeName,max: 150});
        clazzScoreStr.push(clazzScoreModelList[i].avgScore)
    }

    var option = {
        title: {
            text: countScore,
            subtext: '考试总得分',
            x: 'center',
            y: '28%',
            textStyle: {
                fontWeight: 'normal',
                fontSize: 40,
            },
            subtextStyle:{
                fontWeight: 'normal',
                fontSize: 20
            }
        },
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        legend: {
            orient: 'horizontal',
            bottom: '0%',
            textStyle: {
                fontSize: '20',
                fontWeight: 'normal'
            },
            data: charStr
        },
        series: [
            {
                name:'科目',
                type:'pie',
                center: ['50%', '35%'],
                radius: ['50%', '70%'],
                avoidLabelOverlap: false,
                label: {
                    normal: {
                        show:false,
                        formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}   ',
                        backgroundColor: '#eee',
                        borderColor: '#aaa',
                        borderWidth: 1,
                        borderRadius: 4,
                        rich: {
                            a: {
                                color: '#999',
                                lineHeight: 22,
                                align: 'center'
                            },
                            hr: {
                                borderColor: '#aaa',
                                width: '100%',
                                borderWidth: 0.5,
                                height: 0
                            },
                            b: {
                                fontSize: 16,
                                lineHeight: 33
                            },

                        }
                    },
                    emphasis: {
                        show: true,
                        textStyle: {
                            fontSize: '30',
                            fontWeight: 'bold'
                        }
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data:chartData
            }
        ]
    };

    var option_achieve = {
        xAxis: {
            type : 'category',
            data: achieveStr

        },
        "dataZoom": [{
            "show": true,
            "height": 30,
            "xAxisIndex": [
                0
            ],
            bottom: 30,
            handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
            handleSize: '110%',
            handleStyle:{
                color:"#d3dee5",

            },
            textStyle:{
                color:"#fff"},
            borderColor:"#90979c"


        }, {
            "type": "inside",
            "show": true,
            "height": 15,
        }],
        yAxis: {
            type: 'value'
        },
        series: [{
            "name": "总分",
            "type": "line",
            symbolSize:10,
            symbol:'circle',
            "itemStyle": {
                "normal": {
                    "barBorderRadius": 0,
                    "label": {
                        "show": true,
                        "position": "top",
                        formatter: function(p) {
                            return p.value > 0 ? (p.value) : '';
                        }
                    }
                }
            },
            data: achieveData,
        }]
    };

    var option_clazz_score = {

        backgroundColor: 'rgba(255,255,255,0)',

        tooltip: {},
        legend: {
            data: [ '个人成绩','班级平均成绩']
        },
        radar: {
            // shape: 'circle',
            indicator: clazzScoreData
        },
        series: [{
            name: '成绩雷达',
            type: 'radar',
            // areaStyle: {normal: {}},
            itemStyle: {normal: {areaStyle: {type: 'default'}}},
            data : [
                {
                    value : clazzScoreStr,
                    name : '班级平均成绩'
                },
                {
                    value : studentScoreStr,
                    name : '个人成绩'
                },
            ]
        }]
    };

	$(function(){
        var myChart = echarts.init(document.getElementById('chart_src'));
        myChart.setOption(option);
        var myChart_achieve = echarts.init(document.getElementById('achieve_src'));
        myChart_achieve.setOption(option_achieve);
        var myChart_clazz_score = echarts.init(document.getElementById('clazz_score_src'));
        myChart_clazz_score.setOption(option_clazz_score);

        window.onresize = function () {
           myChart.resize();
           myChart_achieve.resize();
           myChart_clazz_score.resize();
        }

		$(".morethen").click(function(){
			document.body.style.overflow='hidden';
			$(".maskone").css("height",$(window).height());
			$(".maskone").css("width",$(window).width());
			$(".maskone").show();
			})
		$(".chooseone ul li").click(function(){
			document.body.style.overflow='auto';
			$(this).addClass("clicked").siblings().removeClass("clicked");
			var achieveId = $(this).attr("id");
            window.location.href =contextRoot+ "studentAchieveApp/getStudentAchieve?studentId=" + $("#studentId").val()+"&achieveId="+achieveId;
			})
		$(".closes").click(function(){
			document.body.style.overflow='auto';
			$(".maskone").hide();
			})
		$(".gradeone").click(function(){
			$(this).addClass("clicked").siblings().removeClass("clicked");
			})
		$(".picScrollone-left").slide({
			titCell:".hd ul",
			mainCell:".bd ul",
			autoPage:true,
			effect:"left",
			autoPlay:true,
			vis:1,
			trigger:"click"
		});
		var swiper = new Swiper('.esults-container', {
		  pagination: {
			el: '.esults-pagination',
			clickable :true,
		  },
		  autoplay: {
				disableOnInteraction: false,
		  },
		});
		var swiper = new Swiper('.year-container', {
		  pagination: {
			el: '.year-pagination',
			clickable :true,
		  },
		  autoplay: {
				disableOnInteraction: false,
		  },
		});
		var swiper = new Swiper('.onascale-container', {
		  pagination: {
			el: '.onascale-pagination',
			clickable :true,
		  },
		  autoplay: {
				disableOnInteraction: false,
		  },
		});
	});


    </script>
</head>
<body>
<input type="hidden" th:value="${studentId}" id="studentId">
<input type="hidden" th:value="${achieveId}" id="achieveId">
<div class="maskone">
    <div class="chooseone">
        <div class="titles">考试选择<i class="closes"></i></div>
        <ul th:each="achieve:${achieveEntityList}">
            <li th:id="${achieve.id}"><span th:text="${achieve.term}"> </span><i class="icon-ok icon-2x"></i></li>
        </ul>
    </div>
</div>
<div class="topperson clearfix">
    <!--<div class="whiteper pull-left"></div>-->
    成绩分析
    <div class="lineons pull-right clearfix">
        <div class="imgleft pull-left"><img th:src="|http://47.97.191.172:8080/java/${studentEntity.image}|" alt="">
        </div>
        <div class="mesleft pull-left"><span th:text="${studentEntity.name}"></span></div>
        <!--<div class="graderight pull-right"><i class="icon-angle-down icon-large"></i></div>-->
    </div>
</div>
<div class="content">
    <div class="picScrollone-left">
        <div class="hd clearfix">
            <span th:text="${achieveEntity.term}"></span>
            <i class="morethen"></i>
        </div>
        <div class="bd">
            <ul class="picList">
                <li>
                    <div class="gradelist clearfix">
                        <div class="gradeone pull-left">
                            <div class="ones">平均分</div>
                            <div class="twos"><span th:text="${achieveEntity.avgScore}"></span></div>
                        </div>
                        <div class="gradeone pull-left">
                            <div class="ones">最高分</div>
                            <div class="twos"><span th:text="${scoreHighEntity.score}"></span></div>
                        </div>
                        <div class="gradeone pull-left">
                            <div class="ones">最低分</div>
                            <div class="twos"><span th:text="${scoreLowEntity.score}"></span></div>
                        </div>
                    </div>
                    <div class="gradeimg">
                        <div id="chart_src" style="width:100%;height:500px"></div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <div class="gradeyearone">
        <div class="gradelist clearfix">
            <div class="gradeone pull-left clicked">
                <div class="ones"><span>班级排名</span></div>
                <div class="twos"><span th:text="${classRank}"></span></div>
            </div>
            <div class="gradeone pull-left">
                <div class="ones"><span>全市排名</span></div>
                <div class="twos"><span th:text="${cityRank}"></span></div>
            </div>
        </div>
    </div>
    <div class="gradeyearone">
        <div class="titles clearfix">
            <span>成绩雷达</span>
        </div>
        <div class="esultslist">
            <div id="clazz_score_src" style="width:100%;height:400px"></div>
        </div>
    </div>
    <div class="gradeyearone">
        <div class="titles clearfix">
            <span>总成绩趋势分析</span>
        </div>
        <div class="esultslist">
            <div id="achieve_src" style="width:100%;height:300px"></div>
        </div>
    </div>
</div>
</body>
</html>
